<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				background:'#fff'
			}">
				<view class="action">
					<text class="wlIcon-fanhui1" @tap="$wanlshop.back(1)"></text>
					<image :src="$wanlshop.oss(detailStr.user.avatar)" mode="aspectFill" class="actionImg"></image>
					<view class="actionName">{{detailStr.user.nickname}}</view>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="wrap">
			<u-swiper :list="list" border-radius='0' height="750" mode="dot"></u-swiper>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="contentBox">
				<view class="boxTitle">{{detailStr.title}}</view>
				<view class="boxText">{{detailStr.content}}</view>
				<view class="boxTime">{{detailStr.createtime_text}}</view>
			</view>

			<!-- 评论 -->
			<view class="comment">
				<view class="commentText">共{{detailStr.comment}}条评论</view>
				<view class="commentFlex">
					<image :src="$wanlshop.oss(user.avatar)" mode="aspectFill" class="commentFlexImg"></image>
					<view class="commentFlexInt">
						<view class="int" @click="commentInput">有话要说，快来评论</view>
					</view>
				</view>
			</view>
			<view class="comment-box" v-for="(item, index) in commentList" :key="'comment'+index">
				<view class="comment-box-item">
					<view>
						<image :src="$wanlshop.oss(item.userinfo.avatar)" mode="aspectFill" class="avatar"></image>
					</view>
					<view class="comment-main">
						<!-- 父评论体-start -->
						<view class="comment-main-top">
							<view class="nick-name-box">
								<view class="nick-name">{{item.userinfo.nickname}}</view>
							</view>
						</view>
						<view class="comment-main-content">
							{{item.content}}
						</view>
						<view class="comment-main-foot">
							<view class="foot-time">{{item.updatetime_text}}</view>
							<view class="foot-btn" @click="reply(item.userinfo.nickname,item.id)">回复</view>
							<view class="foot-btn" v-if="item.user_id == user.id"
								@click="confirmDelete(index,-1,item.id)">删除</view>
						</view>
						<!-- 父评论体-end -->
						<!-- 子评论列表-start -->
						<view class="comment-sub-box" v-for="(itm, idx) in item.replyList" :key="'r'+idx">
							<view class="comment-sub-item">
								<view>
									<image :src="itm.user.avatar" mode="aspectFill" class="avatar">
									</image>
								</view>
								<view class="comment-main">
									<view class="sub-comment-main-top">
										<view class="nick-name">{{itm.user.nickname}}</view>

									</view>
									<view class="comment-main-content">
										{{itm.content}}
									</view>
									<view class="comment-main-foot">
										<view class="foot-time">{{itm.updatetime_text}}</view>
										<!-- <view class="foot-btn" @click="reply()">
											回复</view> -->
										<view class="foot-btn" v-if="itm.user_id == user.id"
											@click="confirmDelete(index,idx,itm.id)">删除
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 子评论列表-end -->
					</view>
				</view>
			</view>
		</view>
		<!-- 新增评论-start -->
		<view class="comment-submit-box" v-if="submit" @click="closeInput">
			<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="{bottom:KeyboardHeight + 'px'}">
				<!-- :style="'bottom:' + KeyboardHeight + 'rpx'" -->
				<view class="comment-submit">
					<view class="btn-click cancel" @click="closeInput">取消</view>
					<view>
						<view class="btn-click" @click="add">发布</view>
					</view>
				</view>
				<textarea class="textarea" v-model="content" :placeholder="placeholder" :adjust-position="false"
					:show-confirm-bar="false" @blur="blur" @focus="focusOn" :focus="focus"></textarea>
			</view>
		</view>
		<!-- 新增评论-end -->

		<view class="zw"></view>
		<view class="footer">
			<view class="footerInt" @click="commentInput">
				<view class="iconfont icon-xiugai"></view>
				<view class="footerIntText">说点什么...</view>
			</view>
			<view class="iconfont icon-liulan1"></view>
			<view class="footerText">{{detailStr.browse}}</view>
			<view class="iconfont" :class="[detailStr.isCollect == 1?'iconActive icon-shoucang':'icon-shoucang3']"
				@click="collectAdd"></view>
			<view class="footerText">{{detailStr.collect}}</view>
			<view class="iconfont icon-comment"></view>
			<view class="footerText">{{detailStr.comment}}</view>
		</view>
		<u-modal v-model="show" content="确定删除此评论吗？" @confirm="cfmDelete" show-cancel-button show-confirm-button
			:async-close="true"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list: [],
				show: false,
				submit: false,
				content: '',
				placeholder: '有话要说，快来评论',
				KeyboardHeight: '',
				focus: '',
				detailStr: {
					browse: 0,
					category_id: 0,
					collect: 0,
					comment: 0,
					content: "",
					createtime_text: "",
					id: 0,
					like: 0,
					platform_id: 0,
					status: 0,
					title: "",
					user_id: '',
					user: {
						avatar: '',
						id: '',
						nickname: '',
						username: ''
					}
				},
				commentList: [],
				StagingArr: [],
				StagingIdx: '',
				StagingId: '',
				StagingIndex: '',
				source_id: '',
				pid: 0,
				isCollect: 2
			}
		},
		computed: {
			...mapState(['user'])
		},
		onLoad(e) {
			this.source_id = e.id
			this.worksDetail(e.id)
			this.commentLists(e.id)
			var that = this
			// #ifdef APP-PLUS
			let platform = uni.getDeviceInfo().platform;
			if (platform === 'ios') {
				// 苹果
				uni.onKeyboardHeightChange(res => {
					console.log('onKeyboardHeightChange', res.height)
					that.KeyboardHeight = res.height;
				})
			} else if (platform === 'android') {
				console.log("platform", platform)
				// 安卓
				that.KeyboardHeight = 0;
			}
			// #endif


		},
		onReady() {

		},
		methods: {
			// 输入评论
			commentInput() {
				// TODO 调起键盘方法
				this.submit = true;
				setTimeout(() => {
					this.focus = true;
				}, 50)
				this.pid = 0
			},
			// 收藏 
			async collectAdd() {
				await uni.request({
					url: '/addons/circle/api.collect/add',
					method: 'post',
					data: {
						circle_id: this.source_id,
					},
					success: res => {
						console.log('收藏', this.detailStr)
						if (this.detailStr.isCollect == 1) {
							this.detailStr.collect -= 1
							this.detailStr.isCollect = 2
							uni.showToast({
								title: '取消收藏成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							this.detailStr.isCollect = 1
							this.detailStr.collect += 1
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
								duration: 2000
							});
						}

						// this.worksDetail(this.source_id)
						// this.commentLists(this.source_id)
					}
				});
			},
			// 评论 
			async commentLists(id) {
				await uni.request({
					url: '/addons/circle/api.index/comment',
					method: 'post',
					data: {
						type: 6,
						circle_id: id

					},
					success: res => {
						console.log('评论', res)
						this.commentList = res.data.data
					}
				});
			},
			// 圈子详情
			async worksDetail(id) {
				await uni.request({
					url: '/addons/circle/api.index/detail',
					method: 'post',
					data: {
						id: id

					},
					success: res => {
						console.log('worksDetail', res)
						if (res.data.images) {
							const arr = res.data.images.split(',')
							const newArr = arr.map(itm => {
								return this.$wanlshop.oss(itm)
							})
							console.log(newArr)
							res.data.images = newArr
						}
						this.list = res.data.images
						this.detailStr = res.data
					}
				});
			},
			// 回复评论
			async reply(reUser, pId) {
				// this.pUser = pUser;
				// this.commentReq.pId = pId;
				// if (reUser) {
				// 	this.commentReq.content = '@' + reUser + ' ';
				// } else {
				// 	this.commentReq.content = '';
				// }
				if (reUser) {
					// this.content = '@' + reUser + ' ';
					this.placeholder = '@' + reUser;
				}
				this.submit = true;
				setTimeout(() => {
					this.focus = true;
				}, 50)
				this.pid = pId
			},
			// 删除评论前确认
			confirmDelete(index, idx, id) {
				var that = this;

				// console.log(index,idx,id)
				this.StagingIdx = idx
				this.StagingIndex = index
				this.StagingId = id
				this.show = true
				// if(idx == -1){
				// 	console.log(index,idx,id)
				// 	console.log(this.commentList)
				// 	this.commentList.splice(index,1)
				// }else{
				// 	this.commentList.forEach((item,ine)=>{
				// 		if(ine == index){
				// 			console.log(ine,item)
				// 			item.replyList.splice(idx,1)
				// 		}
				// 	})
				// }
			},
			async cfmDelete() {
				var that = this
				// setTimeout(() => {
				// 	that.show = false;
				// }, 3000)
				await uni.request({
					url: '/addons/circle/api.comment/del',
					method: 'post',
					data: {
						id: this.StagingId
					},
					success: res => {
						// this.StagingArr.splice(this.StagingIdx,1)
						if (this.StagingIdx == -1) {
							console.log(this.commentList)
							this.commentList.splice(this.StagingIndex, 1)
						} else {
							this.commentList.forEach((item, ine) => {
								if (ine == this.StagingIndex) {
									item.replyList.splice(this.StagingIdx, 1)
								}
							})
						}
						that.show = false;
						uni.showToast({
							title: '删除成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 没用的方法，但不要删
			stopPrevent() {},
			// 输入框失去焦点
			blur() {
				this.focus = false;
			},
			// 输入框聚焦
			focusOn() {
				this.$emit('focusOn');
			},
			// 新增评论
			async add() {
				if (!this.content) {
					uni.showToast({
						title: '评论内容过短',
						icon: 'none',
						duration: 2000
					});
					return
				}
				await uni.request({
					url: '/addons/circle/api.comment/add',
					method: 'post',
					data: {
						type: "6",
						circle_id: this.source_id,
						content: this.content,
						pid: this.pid

					},
					success: res => {
						this.content = ''
						this.focus = false;
						this.submit = false;
						uni.showToast({
							title: '评论成功',
							icon: 'none',
							duration: 2000
						});
					}
				});

			},
			// 关闭输入评论
			closeInput() {
				this.content = '';
				this.placeholder = '有话要说，快来评论';
				this.focus = false;
				this.submit = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.actionImg {
		width: 68rpx;
		height: 68rpx;
		margin-left: 20rpx;
		border-radius: 100%;
	}

	.actionName {
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
	}

	.content {
		padding: 0 30rpx;

		.contentBox {
			width: 100%;
			height: auto;

			.boxTitle {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				margin-top: 48rpx;
			}

			.boxText {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 35rpx;
				margin-top: 24rpx;
			}

			.boxTime {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #888888;
				line-height: 30rpx;
				margin-top: 48rpx;
			}
		}

		// 评论
		.comment {
			width: 100%;
			height: auto;
			margin-top: 48rpx;
			border-top: 1rpx solid #e1e1e1;

			.commentText {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #555555;
				line-height: 30rpx;
				margin-top: 14rpx;
			}

			.commentFlex {
				display: flex;
				width: 100%;
				align-items: center;
				margin-top: 26rpx;
				padding-bottom: 48rpx;

				.commentFlexImg {
					width: 68rpx;
					height: 68rpx;
					border-radius: 100%;
				}

				.commentFlexInt {
					width: 604rpx;
					height: 64rpx;
					background: #F6F6F6;
					border-radius: 32rpx;
					margin-left: auto;
					padding: 0 28rpx;

					.int {
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #AAAAAA;
						line-height: 64rpx;
					}
				}
			}
		}
	}

	.comment-box {
		padding: 10rpx 0;
	}

	.comment-box-item {
		display: flex;
	}

	.comment-main {
		padding-left: 20rpx;
	}

	.comment-main-top {
		width: 600rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.sub-comment-main-top {
		width: 510rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.nick-name-box {
		display: flex;
		align-items: center;
	}

	.comLogo {
		margin-right: 18rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		color: #FFFFFF;
	}

	.com1 {
		background-color: #d218b1;
	}

	.com2 {
		background-color: #f19c0b;
	}

	.com3 {
		background-color: #c8da85;
	}

	.com4 {
		background-color: #bfd0da;
	}

	.nick-name {
		color: #888888;
	}

	.isLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #2d8cf0;
	}

	.notLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #333333;
	}

	.comment-main-content {
		padding: 10rpx 10rpx 10rpx 0;
	}

	.comment-main-foot {
		display: flex;
		font-size: 22rpx;
	}

	.foot-time {
		color: #888;
	}

	.replayTag {
		color: #909399;
		margin-bottom: 5px;
		border: 1px solid #c8c9cc;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16rpx;
		padding: 5px 10px;
	}

	.replyTagClose {
		font-size: 20px;
		line-height: 12px;
		padding: 0 0 2px 5px;
	}

	.foot-btn {
		padding-left: 10rpx;
		color: #888;
	}

	.comment-sub-box {
		padding: 20rpx 0;
	}

	.comment-sub-item {
		display: flex;
	}

	.comment-none {
		padding: 20rpx;
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 9900;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
		height: 100%;
	}

	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 5rpx;
		left: 0;
		// bottom: 0;
		border: 1px solid #ddd;
		transition: .3s;
		-webkit-transition: .3s;
	}

	.btn-click {
		color: #007AFF;
		font-size: 28rpx;
		padding: 10rpx;
	}

	.cancel {
		color: #606266;
	}

	.textarea {
		height: 100px;
		padding: 16rpx;
		width: 100%;
		font-size: 28rpx;
	}

	.comment-submit {
		padding: 5rpx 20rpx 0 20rpx;
		border-bottom: 1px dashed #ddd;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.zw {
		width: 100%;
		height: 140rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer {
		width: 100%;
		padding: 0 30rpx;
		height: 140rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 99;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #e1e1e1;

		.footerInt {
			width: 238rpx;
			height: 64rpx;
			background: #F6F6F6;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			color: #666;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;

			.icon-xiugai {
				margin-left: 32rpx;
			}

			.footerIntText {
				margin-left: 12rpx;
			}

		}

		.icon-liulan1 {
			margin-left: auto;
		}

		.footerText {
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 28rpx;
			margin-right: 28rpx;
		}
	}

	.iconActive {
		color: #4cbd66;
	}

	.icon-31shoucangxuanzhong {
		color: #4cbd66;
	}
</style>